<template>
  <div class="margin1-top">
    <div class="title-row">
      <div class="title-left">主管单位</div>
      <div v-for="(item,index) in zgdw"><a :class = "{blue: changeZgdw == index}" @click = "change1(index)">{{item.name}}</a></div>
    </div>
    <div class="title-row">
      <div class="title-left">建设性质</div>
      <div v-for="(item,index) in jsxz"><a :class = "{blue: changeJsxz == index}" @click = "change2(index)">{{item.name}}</a></div>
    </div>
    <div class="title-row">
      <div class="title-left">招标方式</div>
      <div v-for="(item,index) in gllx"><a :class = "{blue: changeGllx == index}" @click = "change3(index)">{{item.name}}</a></div>
    </div>
    <div class="title-row">
      <div class="title-left">年份</div>
      <div v-for="(item,index) in nf"><a :class = "{blue: changeNf == index}" @click = "change4(index)">{{item.name}}</a></div>
    </div>

    <div class="title">
      <span>招投标资料管理</span>
    </div>
    <div class="subtitle" >
      <span>排序选择</span>
      <span>时间 <i class="el-icon-bottom"></i></span>
    </div>
    <div style="padding-bottom: 20px; float: right;">
      <!-- <el-button type="primary" plain style="float: right;" @click = "upload">上传资料</el-button> -->
      <import-excel></import-excel>
    </div>

    <div style="padding-top: 30px;">
      <el-table :data="tableData" border>
        <el-table-column  label="项目名称" width ="300">
          <template slot-scope="scope">
            <a  href="#/biddetail"
            target="_blank"  v-if="scope.row.xmmc == '襄阳市疾病预防控制中心迁建项目'" style="color: blue;">{{scope.row.xmmc}}</a>
            <a v-else>{{scope.row.xmmc}}</a>
        </template>
        </el-table-column>
        <el-table-column prop="xmdm" label="项目代码">
        </el-table-column>
        <el-table-column prop="jd" label="阶段">
        </el-table-column>
         <el-table-column label="发改委招标核准意见">
          <el-table-column prop="scdw" label="上传单位"/>
          <el-table-column prop="zbxs" label="招标形式"/>
        </el-table-column>
         <el-table-column label="招标组织形式">
          <el-table-column prop="scdw" label="上传单位"/>
          <el-table-column prop="zbxs" label="招标形式"/>
        </el-table-column>
         <el-table-column label="招标方式">
          <el-table-column prop="scdw" label="上传单位"/>
          <el-table-column prop="zbxs" label="招标形式"/>
          <el-table-column prop="zbxs" label="预算金额"/>
          <el-table-column prop="zbxs" label="招标备案"/>
        </el-table-column>

         <el-table-column label="招标公告，招标文件">
          <el-table-column prop="scdw" label="招标单位"/>
          <el-table-column prop="zbxs" label="公告时间"/>
          <el-table-column prop="zbxs" label="公告服务平台"/>
          <el-table-column prop="zbxs" label="截止时间"/>
        </el-table-column>

         <el-table-column label="投标资料">
          <el-table-column prop="scdw" label="投标单位数量"/>
          <el-table-column prop="zbxs" label="开标时间"/>
        </el-table-column>

         <el-table-column label="专家选定资料">
          <el-table-column prop="scdw" label="专家人数"/>
          <el-table-column prop="zbxs" label="属于专家库"/>
        </el-table-column>

        <el-table-column label="评标公示时间">
        </el-table-column>

          <el-table-column label="中标通知时间">
        </el-table-column>

         <el-table-column label="施工合同">
          <el-table-column prop="zbxs" label="签订时间"/>
          <el-table-column prop="zbxs" label="监督备案时间"/>

        </el-table-column>
        <el-table-column label="安全监督备案">
        </el-table-column>
       <el-table-column label="质量监督备案">
        </el-table-column>
       
       
      </el-table>
    </div>
    <!--分页-->
    <div style="float: right; margin-top: 15px;">
      <div class="block">
        <el-pagination layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

  import importExcel from '@/components/import/index.vue';

  export default {

    components: {
      importExcel
    },

    data() {
      return {

        changeZgdw: 0,
        changeJsxz: 0,
        changeGllx: 0,
        changeNf: 0,
        zgdw: [{
            no: 1,
            name: "不限",
            active: true
          },
          {
            no: 2,
            name: "市财政局",
            active: false
          },
          {
            no: 3,
            name: "市科技局",
            active: false
          },
          {
            no: 4,
            name: "市人社局",
            active: false
          },
          {
            no: 5,
            name: "市招商局",
            active: false
          },
          {
            no: 6,
            name: "市自然规划局",
            active: false
          }],

          jsxz: [
            {
              no: 1,
              name: "不限"
            },
            {
              no: 2,
              name: "新建项目"
            },
            {
              no: 3,
              name: "续建项目"
            },
            {
              no: 4,
              name: "扩建项目"
            },
            {
              no: 5,
              name: "恢复项目"
            }
          ],
          gllx: [
            {
              no: 1,
              name: "不限"
            },
            {
              no: 2,
              name: "委托招标"
            },
            {
              no: 3,
              name: "公开招标"
            },
            {
              no: 4,
              name: "邀请招标"
            },
            {
              no: 5,
              name: "自行招标"
            },
           
          ],
          
          nf: [
            {
              no: 1,
              name: "不限"
            },
            {
              no: 2,
              name: "2018年"
            },
            {
              no: 3,
              name: "2019年"
            },
            {
              no: 4,
              name: "2020年"
            },
            {
              no: 5,
              name: "2021年"
            }
          ],


        xmmc: '襄阳市疾病预防控制中心迁建项目',

        tableData: [{
          date: '2016-05-02',
          xmmc: '襄阳市疾病预防控制中心迁建项目',
          xmdm: 'XYS_8888888',
          zllx: '招标公告'
        }, {
          date: '2016-05-02',
          xmmc: '襄阳市疾病预防控制中心迁建项目',
          xmdm: 'XYS_8888888',
          zllx: '招标公告'
        }, {
          date: '2016-05-02',
          xmmc: '襄阳市疾病预防控制中心迁建项目',
          xmdm: 'XYS_8888888',
          zllx: '招标公告'
        }, {
          date: '2016-05-02',
          xmmc: '襄阳市疾病预防控制中心迁建项目',
          xmdm: 'XYS_8888888',
          zllx: '招标公告'
        },{
          date: '2016-05-02',
          xmmc: '襄阳市疾病预防控制中心迁建项目',
          xmdm: 'XYS_8888888',
          zllx: '招标公告'
        },{
          date: '2016-05-02',
          xmmc: '襄阳市疾病预防控制中心迁建项目',
          xmdm: 'XYS_8888888',
          zllx: '招标公告'
        },{
          date: '2016-05-02',
          xmmc: '襄阳市疾病预防控制中心迁建项目',
          xmdm: 'XYS_8888888',
          zllx: '招标公告'
        }]
      }
    },
    methods: {
      download1(){
        alert("正在下载！")
       

      },
      download2(){
        alert("正在下载！")
      },
      change1(index){
        this.changeZgdw = index
      },
      change2(index){
        this.changeJsxz = index
      },
      change3(index){
        this.changeGllx = index
      },
      change4(index){
        this.changeNf = index
      }
    
    }
  }
</script>

<style lang="scss" scoped>
  .margin1-top{
    margin-top: 65px;
  }
  
  .title-row {
    background-color: #F3F3F3;
    display: flex;
    align-items: center;
  }

  .title-row div {
    padding: 10px;
  }

  .title-left {
    background-color: #DBDBDB;
    width: 200px;
    text-align: center;
  }

  .text {
    font-size: 14px;
  }

  .title {
  font-size: 25px;
  color: #000000;
  font-weight: 600;
  padding: 10px 0;
  border-bottom: 5px solid #000;
}
.subtitle{
    padding: 10px 0;
}
.subtitle span:first-child{
  background-color:pink;
  padding: 5px;
}

.subtitle span:last-child{
  background-color:palevioletred;
  padding: 5px;
  color: white;

}

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 360px;
    margin: 10px;
  }

  #app {
    width: 100%;
    padding: 10px;
  }
  .blue {
    color: blue;
  }
</style>
